<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="/css/pintuer.css">
    <link rel="stylesheet" href="/css/admin.css">
    <script src="/js/jquery.js"></script>
    <script src="/js/pintuer.js"></script>
    <script src="/js/vuejs-2.5.16.js"></script>
    <script src="/js/axios-0.18.0.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="/element-ui/lib/index.js"></script>

    <style>
        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 100%;
        }
    </style>
</head>
<body>
<div class="panel admin-panel" id="moviesListDiv">
    <div class="panel-head"><strong class="icon-reorder"> 题目列表</strong> <a href="" style="float:right; display:none;">添加字段</a>
    </div>
    <div class="padding border-bottom">
        <form>
            <ul class="search" style="padding-left:10px;">
                <!--                <li><a class="button border-main icon-plus-square-o" href="/movies_add.html"> 添加试卷</a></li>-->
                <li><a class="button border-main icon-plus-square-o" href="question_add.html"> 添加题目 </a></li>
            </ul>
        </form>
    </div>

    <table class="table table-hover text-center">

        <tr>
            <ul v-for="(quetions,index) in pageInfo.items">
                <li>
                    <el-card class="box-card" shadow="hover">
                        <div slot="header" class="clearfix">
                            <span>{{index + 1 + (pageInfo.page - 1) * pageInfo.pagesize}}</span>
                            <span>{{quetions.question}}</span>
                            <el-button style="float: right; padding: 3px 0" type="text"
                                       @click="DeleteQuestions(quetions.id)">删除题目
                            </el-button>
                            <el-button style="float: right; padding: 3px 0" type="text" @click="toUpdate(quetions.id)">
                                修改题目
                            </el-button>
                        </div>
                        <div v-for="(option,index) in quetions.options" :key="option" class="text item">
                            {{index+1 +"."+option.content}}
                        </div>
                    </el-card>
                </li>
            </ul>
        </tr>

        <tr>
            <td colspan="7" style="text-align:left;padding-left:20px;">
                <!--<a href="javascript:void(0)" class="button border-red icon-trash-o" style="padding:5px 15px;"
                   @click="deleteAll()"> 批量删除</a>-->
                <span>总记录数：{{pageInfo.counts}}</span>
            </td>
        </tr>
        <tr>
            <td colspan="8">
                <div class="pagelist">
                    <a href="javascript:" @click="changePage(1)">首页</a>
                    <a href="javascript:"
                       @click="(pageInfo.page - 1) <= 0 ? changePage(1) : changePage(pageInfo.page - 1)">上一页</a>
                    <!--                    &lt;!&ndash;<a href="javascript:" class="current" v-for="(item,index) in pageInfo.navigatepageNums"  @click="changePage(item)">{{item}}</a>&ndash;&gt;-->
                    <a href="javascript:"
                       @click="changePage((pageInfo.page + 1) >= pageInfo.pages ? pages : (pageInfo.page + 1))">下一页</a>
                    <a href="javascript:" @click="changePage(pageInfo.pages)">末页</a>
                </div>
            </td>
        </tr>
    </table>

</div>
<script type="text/javascript">
    const app = new Vue({
        el: '#moviesListDiv',
        data: {
            pageInfo: {},
            pageNumber: 1,
            pageSize: 2,
            ids: [],
            level: "",
        },
        methods: {

            findList(level) {

                axios.get("/soul/question", {
                    params: {
                        pageNumber: this.pageNumber,
                        pageSize: this.pageSize,
                        level: level
                    }
                }).then(resp => {
                    this.pageInfo = resp.data
                    console.log(this.pageInfo);
                })
            },

            // 删除问题
            DeleteQuestions(questionId) {

                if (confirm("是否确认删除")) {
                    axios.delete("/soul/question/" + questionId).then(resp => {

                        if (resp.data) {
                            this.findList(this.level)
                        } else {
                            alert("删除失败")
                        }
                    })

                }
            },

            toUpdate(questionId) {
                location.href = "question_update.html?questionId=" + questionId;
            },


            changePage(pageNumber) {
                this.pageNumber = pageNumber;
                this.findList()
            },

        },
        created() {

            let level = location.search.split("=")[1];
            // alert(decodeURI(level))

            if (level != null) {

                this.findList(decodeURI(level))
                this.level = decodeURI(level);
            }

        },
    })
</script>
<script src="/js/verify.js"></script>
</body>
</html>